<template>
     <Scroll>
        <div class="singer">
            <ul>
                <li
                    class="item"
                    v-for="item in singerList" 
                    :key="item.singer_id"
                    @click="getSinger(item)"
                >
                    <img :src="item.singer_pic" class="avatar">
                    <span class="name">{{item.singer_name}}</span>
                </li>
            </ul>
            <div class="load-con" v-show="!singerList.length">
                <Load></Load>
            </div>
        </div>
    </Scroll>
</template>

<script>
import Scroll from "@/components/base/scroll"
import {mapMutations} from "vuex"
import Load from "@/components/base/loading"
export default {
    data(){
        return {
            singerList:[],
        }
    },
    created(){
        this.$axios
            .get("http://localhost:1111/api/singerData")
            .then(res=>{
                this.singerList=res.data
            })
    },
    methods: {
        getSinger(item){
            this.$router.push({
                path:`/singer/${item.singer_mid}`
            })
            this.setSinger(item)
        },
        ...mapMutations({
            setSinger:"SET_SINGER"
        })
    },
    components:{
        Scroll,
        Load
    }
}
</script>

<style lang="stylus" scoped>
@import "../../common/stylus/variable.styl"
.singer
    padding-bottom:100px;
    z-index -10
    width: 100%
    overflow: hidden
    background: $color-background
    .item
        display:flex
        align-items:center
        padding:20px 0 0 30px
        .avatar
            width: 50px
            height: 50px
            border-radius: 50%
        .name
            margin-left: 20px
            color: $color-text-l
            font-size: $font-size-medium
    .load-con
        position:absolute
        width:100%
        top:20%
</style>